iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
1

不會程式也能用 VurPress 玩 JAMStack 架設網站(2)

這篇延續上一篇的進度,我們看到我們的 GitHub Actions 在 yarn build 的階段發生了錯誤:

修正發生錯誤的原因

我們從錯誤訊息可以看出,問題是出在 vuepress-plugin-sitemap 這個 plugin 上面:

error vuepress-plugin-sitemap apply generated failed.
TypeError: Invalid base URL: <YOUR SITE DOMAIN NAME>

看來問題是這個 plugin 在運行的時候需要一個 URL 格式的字串作為參數,但是我們卻給了 <YOUR SITE DOMAIN NAME> 這個格式不合的參數。


來到 config.js 修改參數

來到 vuepress-blog-template/.vuepress/ 這個路徑中,可以看到 config.js 這個檔案,直接點開文件內容之後,可以在文件內容的右上角看到鉛筆的 icon,點擊進行文件編輯:


接著我們可以看到 54、55 行就是在設定 vuepress-plugin-sitemap 用的,但問題在於 sitemap 屬性預設給了 true,但是 hostname 卻預設 <YOUR SITE DOMAIN NAME> ,才因此造成失敗。

解決方式也很簡單,將 54 行改成: sitemap: false 然後存檔即可。

等之後你確定完成站點的設置,網域 CNAME 也設置好了之後,再來開啟並填入正確的數值即可。

跳整完後會再次運行腳本,這次就成功啦

接著就是到 Setting 裡面去開啟 GitHub Pages 的設定囉,忘記怎麼使用的話可以去翻之前的文章。


使用 GitPages 不可不知的 config.js/base 設定

但有趣的事情來了,我們打開我們設置好的網址,卻看到一個跑版破圖的網站!

WTF?

其實這時候也只要去config.js 中進行設置就可以解決囉。

跟上面一樣的步驟,對 config.js 進行檔案修改,像下圖的範例一樣加入這一行: base: '/vuepress-blog-template/',

當然更改完後會再跑一次 GitHub Actions 腳本

部署完成後,我們再次回到剛剛的網頁,可以看到熟悉的漂亮頁面回來啦!


上一篇
不會程式也能用 VurPress 玩 JAMStack 架設網站(1)
下一篇
把 HackMD 當成網站後台
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言